<!DOCTYPE html>


<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>预约挂号</title>
		<!-- 预约挂号页面 -->
		<link rel="stylesheet" type="text/css" href="/css/com.css"/>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="/css/appointment.css"/>
		<script src="/js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>	
		<div class="all">
			<div class="block">
				<div class="position">
						<span class="label label-success">
							您现在的位置：
							>
							预约挂号
						</span>					
				</div>
				<div class="progress">
				  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
				    <span class="sr-only">40% Complete (success)</span>
				  </div>
				</div>
				<div class="container-fluid">
			<div  class="bgcHeader col-lg-12">
				<div>
					<h1>&nbsp;</h1>
				</div>
				
				<div class="col-lg-12">
					<h1 class="text-center text-black part1-textSet ">预约挂号</h1>
				</div>
				
				
				
				<div>
					<h1>&nbsp;</h1>
				</div>
			</div>
			
			
			
			
			<div class="row mainBGC">
				<!-- 左侧查询部分 -->
				<div class="col-lg-2">
					
				</div>
				<div class="col-lg-4 part1-bgc">
					<div class="">
						<h1>快速预约挂号</h1>
					</div>
					<div>
						<h1>&nbsp;</h1>
					</div>
					<div class="">
						<p>名医小秘协助您查询全国39个省份共3601家医院在各个预约挂号服务平台的号源信息，助您轻松预约挂号</p>
					</div>
					<div>
						<h3>&nbsp;</h3>
					</div>
					<div class="form-group">
					  <label for="firstname" class=" control-label">您如果知道医生的名字，也可以通过搜医生的功能进行预约挂号。</label>
					  <div class="col-lg-10">
						  <input type="text" class="form-control nameSet" />
					  </div>
					  <div class="col-lg-2">
						  <button class="btn btn-default btnColor">&nbsp;&nbsp;</button>
					  </div>
					</div>
				</div>
				<!-- 右侧预约部分 -->
				<div class="col-lg-5 part1-bgc">
					<form class="form-horizontal" role="form">
					  <div class="form-group">
					    <label for="firstname" class="col-sm-2 control-label choose1">选择科室</label>
					    <div class="col-sm-10 set1  exchangeHidden1">
					      <input type="text" class="form-control" id="firstname" autocomplete="off">
						  
						  <div id="exchange1" class="hidden1 table-bordered">
						  	<ul>
								<li class="aSet"><a href="#">神经科</a></li>
								<li class="aSet"><a href="#">神经科</a></li>
								<li class="aSet"><a href="#">神经科</a></li>
								<li class="aSet"><a href="#">神经科</a></li>
						  	</ul>
						  </div>
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="lastname" class="col-sm-2 control-label">选择医生</label>
					    <div class="col-sm-10  exchangeHidden2">
					      <input type="text" class="form-control" id="lastname">
						  <div id="exchange2" class="hidden2 table-bordered">
						  	<ul>
								<li class="aSet"><a href="#">医生1</a></li>
								<li class="aSet"><a href="#">医生2</a></li>
								<li class="aSet"><a href="#">医生3</a></li>
								<li class="aSet"><a href="#">医生4</a></li>
						  	</ul>
						  </div>
					    </div>
					  </div>
					  
					  
					  
					  
					  
					  
					  
					  
					  
					  
					  
					  
					  
					  
					  
					  
					  
					  
					  
					  <div class="form-group">
					    <label for="lastname" class="col-sm-2 control-label">预约人姓名</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="lastname">
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="lastname" class="col-sm-2 control-label">预约人电话</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="lastname">
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="lastname" class="col-sm-2 control-label">预约时间</label>
					    <div class="col-sm-10">
					      <input type="date" class="form-control" id="lastname">
					    </div>
					  </div>
					  <div class="form-group">
					    <div class="col-sm-offset-2 col-sm-10">
					      <button type="submit" class="btn form-control btn-default">确认预约</button>
					    </div>
					  </div>
					</form>
				</div>
				
				
				<div class="col-lg-12">
					<h1>&nbsp;</h1>
				</div>
				<div class="col-lg-12">
					<h1>&nbsp;</h1>
				</div>
				<div class="col-lg-12">
					<div class="col-lg-2">
						
					</div>
					<div class="col-lg-2 ">
						<h1><a href="#">名医推荐</a></h1>
					</div>
					
				</div>
				
				
				
				
				
				
				
				<div class="col-lg-2">
				</div>
				
				
				
				<div class="col-lg-2">
					<a href="#"><img src="https://kano.guahao.cn/JSh6101750_image140.jpg?timestamp=1484029057855" ></a>
					<h3><a href="#">王武庆</a></h3>
					<p><a href="#">主任医师 / 教授</a></p>
					<p class="overHidden"><a href="">擅长耳显微外科，耳内镜手术，耳科微创手术，如各类中耳炎、胆脂瘤，分泌性中耳炎，腺样体肥大，鼓膜穿孔，耳硬化症，中耳畸形，中耳听力重建、周围性面瘫、搏动性耳鸣</a></p>
				</div>
				<div class="col-lg-2">
					<a href="#"><img src="https://kano.guahao.cn/JSh6101750_image140.jpg?timestamp=1484029057855" ></a>
					<h3>王武庆</h3>
					<p>主任医师 / 教授</p>
					<p class="overHidden">擅长耳显微外科，耳内镜手术，耳科微创手术，如各类中耳炎、胆脂瘤，分泌性中耳炎，腺样体肥大，鼓膜穿孔，耳硬化症，中耳畸形，中耳听力重建、周围性面瘫、搏动性耳鸣</p>
				</div>
				<div class="col-lg-2">
					<a href="#"><img src="https://kano.guahao.cn/JSh6101750_image140.jpg?timestamp=1484029057855" ></a>
					<h3>王武庆</h3>
					<p>主任医师 / 教授</p>
					<p class="overHidden">擅长耳显微外科，耳内镜手术，耳科微创手术，如各类中耳炎、胆脂瘤，分泌性中耳炎，腺样体肥大，鼓膜穿孔，耳硬化症，中耳畸形，中耳听力重建、周围性面瘫、搏动性耳鸣</p>
				</div>
				<div class="col-lg-2">
					<a href="#"><img src="https://kano.guahao.cn/JSh6101750_image140.jpg?timestamp=1484029057855" ></a>
					<h3>王武庆</h3>
					<p>主任医师 / 教授</p>
					<p class="overHidden">擅长耳显微外科，耳内镜手术，耳科微创手术，如各类中耳炎、胆脂瘤，分泌性中耳炎，腺样体肥大，鼓膜穿孔，耳硬化症，中耳畸形，中耳听力重建、周围性面瘫、搏动性耳鸣</p>
				</div>
			</div>
		</div>
			</div>
		</div>
		
	</body>
	<script type="text/javascript">
		$(".exchangeHidden1").click(function(){
			$("#exchange1").removeClass("hidden1")
		})
		
		$(".exchangeHidden1").mouseleave(function(){
			$("#exchange1").addClass("hidden1")
		})
		
		$(".exchangeHidden2").click(function(){
			$("#exchange2").removeClass("hidden2")
		})
		
		$(".exchangeHidden2").mouseleave(function(){
			$("#exchange2").addClass("hidden2")
		})
	</script>
</html>
